<template>
  <div class="body">
    <div class="show-video">
      <div class="copy">{{title}}</div>
    <div class="show-media">
      <video id="localVideo" autoplay  playsinline muted ></video>
      <div class="button-box">
      <el-button type="primary" class="call-button" @click="startCall" >发起</el-button>
        <el-button type="warning" class="call-button" @click="overCall">挂断</el-button>
        <el-button type="success" class="call-button" plain @click="takePicture">拍照</el-button>
        <el-button type="success"  class="call-button" plain @click="takeRecord">录制</el-button>

      </div>
    </div>
     <div class="show-media">
       <video id="remoteVideo" autoplay playsinline muted></video>
       <div class="button-box">
       <el-button type="primary" class="call-button">发起</el-button>
         <el-button type="warning">挂断</el-button>
       </div>
     </div>
    </div>
    <div>
    <div class="show-media">
      <canvas id="picture"></canvas>

        <a :href="link" v-if="isShowDownload" download="img.png">下载</a>


    </div>
    </div>
  </div>
</template>

<script >
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      showMyMedia: false,
      myStreamSrc: null,
      title: 'your device supported',
      link: '',
      isShowDownload: false,
    }
  },
  mounted() {
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia&&navigator.mediaDevices.enumerateDevices()) {
      this.title = 'your device supported'
    } else  {
      this.title = 'your device not supported'
    }
    navigator.mediaDevices.enumerateDevices().then(
        devices => {
          devices.forEach(device => {
            console.log('kind:',device.kind,
                'label',device.label,
                'deviceId',device.deviceId)
          })
        }
    ).catch( err=> {
       console.log(err)
    })
  },
  methods: {
   startCall() {
     navigator.mediaDevices.getUserMedia( {
       video: {
         width: 640,
         height: 480
       },
       audio: {
         echoCancellation: true,
         noiseSuppression: true,
         autoGainControl: true
       }
     }).then(stream => {
       this.showMyMedia = true;
       const localVideo = document.getElementById('localVideo');
       localVideo.srcObject = stream;
     })
   },
   overCall() {
     const localVideo = document.getElementById('localVideo');
      if(localVideo.srcObject)
      {
        localVideo.srcObject.getTracks().forEach(track => track.stop());
      }
      localVideo.srcObject = null;
   },
   takePicture() {
     const localVideo = document.getElementById('localVideo');
     const picture = document.getElementById('picture'); // 通过canvas画布获取图片
     picture.width = localVideo.videoWidth; // 设置图片的宽度
     picture.height = localVideo.videoHeight; //设置图片的高度
     picture.getContext('2d').drawImage(localVideo, 0, 0, picture.width, picture.height); // 画布绘制视频
     // console.log(picture.toDataURL('image/png')); // 获取图片的base64编码
     //下载图片连接
     this.link = picture.toDataURL('image/png');
     this.isShowDownload = true;
   },
    takeRecord() {

    }
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.body {
  display: flex;
  height: 100vh;
  margin: 0;
  align-items: center;
  justify-content: center;
  padding: 0 50px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  gap: 60px;
  flex-wrap: wrap;
}
video {
  margin: 0 50px;
  box-sizing: border-box;
  border-radius: 2px;
  padding: 0;
  width: 640px;
  height: 480px;
  box-shadow: rgba(156, 172, 172, 0.2) 0px 2px 2px, rgba(156, 172, 172, 0.2) 0px 4px 4px, rgba(156, 172, 172, 0.2) 0px 8px 8px, rgba(156, 172, 172, 0.2) 0px 16px 16px, rgba(156, 172, 172, 0.2) 0px 32px 32px, rgba(156, 172, 172, 0.2) 0px 64px 64px;
}
.copy {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  color: rgba(0, 0, 0, 0.5);
}
.show-media {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.show-video {
  display: flex;
  flex-direction: row;
}
.call-button {
  width: 50px;
}
.button-box {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 60px;
}
.picture-show {
  display: flex;
  flex-direction: row;
  gap: 20px;
}
</style>
